<!--留言寄语-->
<template>
  <section class="foot-action">
    <div class="inner"> 
      <div class="input-wrap" v-if="isComment || typeof this.isComment === 'undefined'">
        <textarea :class="textareaClass" ref="textareaPl" v-on:focus="onfocus()" v-on:blur="onblur()" :placeholder="placeholder" v-model="content" ></textarea>
        <button @click="save($event)" v-preventReClick="2000" v-on:mousedown="mouseDown" v-if="content.length > 0 && content.trim().length != 0" class="text-btn"><span>提交</span></button>
      </div>
      <div class="input-wrap1" v-if="!isComment">
      </div>
      <div class="icons-btn-wrap">
        <i @click="up" v-if="allowUp || typeof allowUp === 'undefined'" class="icon icon-like" :class="{'icon-liked': isUp || hasUp}"></i>
        <i @click="goCommentList" v-if="isComment || typeof isComment === 'undefined'" class="icon icon-msg"><i v-if="data.comments" class="num">{{data.comments}}</i></i>
        <i v-if="isShowCollect" @click="addCollection" class="icon icon-collection" :class="{'icon-collectioned': hasCollection}"></i>
        <!-- <i @click="showShareDialog" class="icon icon-share"></i> -->
        <i v-if="allowShare || typeof allowShare === 'undefined'"  @click="showShareTo" class="icon icon-share"></i>
      </div>
    </div>
  </section>
</template>

<script>
  import Textarea from 'cube-ui'
  export default {
    name: '',
    props: ['commentId',
      'isComment',
      'contentId',
      'upsCount',
      'comments',
      'detail',
      'allowUp',//是否允许点赞
      'allowCollection',//是否允许收藏
      'shareType', // 分享类型
      'commentList', // true:已经有评论列表,因此不跳转评论列表
      'allowShare', //允许分享
      'isUp', //用于党工委是否点赞
    ],
    components: {Textarea},
    data () {
      return {
        content: '',
        textareaClass: '',
        data: {
          ups: 0,
          comments: 0
        },
        hasCollection: false,
        isShowCollect: true,
        hasUp: false,
        placeholder:'说些什么',
      }
    },
    created () {
      if (this.$store.state.isSpace || this.shareType === 7) {
        this.isShowCollect = false
      }
      if (!this.allowCollection && typeof this.allowCollection !== 'undefined') {
        this.isShowCollect = false
      }
      this.preData = this.$store.state.newsDetail
      this.data.comments = this.comments
      console.log('this.$store.state.newsDetail.detail', this.$store.state.newsDetail.detail)
      if (this.$store.state.newsDetail.detail) {
        this.hasCollection = this.$store.state.newsDetail.detail.collected
        this.hasUp = this.$store.state.newsDetail.detail.upOrDown
        this.data.ups = this.$store.state.newsDetail.detail.newsContent.ups
      }
      if (this.$store.state.isSpace) {
        this.hasUp = this.$store.state.newsDetail.support
      }
      this.loadData().then(() => {
        this.fetchDzsc(this.contentId)
      })
    },
    watch: {
      comments (val, oldVal) {
        this.data.comments = val
      }
    },
    methods: {
      focusChild(placeholder){
        console.log('placeholder',placeholder)
        this.placeholder = placeholder || this.placeholder
        this.$refs.textareaPl.focus()
        this.textareaClass = 'on-focus'
      },
      // 显示分享弹框组件
      showShareDialog () {
        let listPic
        if (this.$store.state.newsDetail.detail && this.$store.state.newsDetail.detail.newsContent) {
          listPic = this.$store.state.newsDetail.detail.newsContent.listPic
        }
        if (!this.shareDialogInstance) {
          this.shareDialogInstance = this.$createShareDialog({
            $props: {
              newsId: this.$route.params.id || this.preData.id,
              newsTitle: this.preData.title,
              type: this.shareType || 0,
              listPic: listPic
            },
            $events: {
              onSuccess: (res, params) => {
                //行为记录
                this.$emit('actionPush',4)
                //行为记录结束
              }
            }
          })
        }
        this.shareDialogInstance.show()
      },
      // 显示分享到组件
      showShareTo () {
        let listPic,listPicOss

        if (this.$store.state.newsDetail.detail && this.$store.state.newsDetail.detail.newsContent) {
          listPic =  this.$store.state.newsDetail.detail.newsContent.listPic
          listPicOss = this.$store.state.newsDetail.detail.newsContent.listPicUrl
        }
        if (!this.shareToInstance) {
          this.shareToInstance = this.$createShareTo({
            $props: {
              newsId: this.$route.params.id || this.preData.id,
              newsTitle: this.preData.title,
              type: this.shareType || 0,
              listPic: listPic,
              listPicOss: listPicOss
            },
            $events: {
              onSuccess: (res, params) => {
                //行为记录
                this.$emit('actionPush',4)
                //行为记录结束
              }
            }
          })
        }
        this.shareToInstance.show()
      },
      goCommentList () {
        if (this.commentList === true) {
          this.$emit('onComment')
          return false
        }
        this.$store.state.newsDetail = this.detail
        this.$router.push({name: 'commentList', query: {id: this.detail.id}})
      },
      /*支部空间评论总数*/
      loadDataSpace () {
        /*不获取了，接口返回不了总数*/
        return
        let params = {
          loginId: this.tools.getUserInfo().id,
          spaceId: this.contentId,
          pageNo: 1,
          pageSize: 1
        }
        return this.fetchService.spaceInfoCommentList(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
          }
          this.data.comments = res.count
          return res
        })
      },
      /*组工信息总数*/
      loadDataGroupInfo () {
        let params = {
          userId: this.tools.getUserInfo().id,
          contentId: this.contentId,
          pageNo: 1,
          pageSize: 1
        }
        return this.fetchService.groupInfoCommentInfoPage(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
          }
          this.data.comments = res.count
          return res
        })
      },
      /*获取当前用户是否点赞或者收藏*/
      fetchDzsc (contentId) {
        this.fetchService.contentGetSfdz(contentId).then(res => {
          if (res.code === 0) {
            this.hasUp = res.data == true
          }
        })
        this.fetchService.contentGetSfsc(contentId).then(res => {
          if (res.code === 0) {
            this.hasCollection = res.data == true
          }
        })
      },
      /*获取评论总数*/
      loadData () {
        if (this.$store.state.isSpace) {
          return this.loadDataSpace()
        }
        if (this.shareType === 7) {
          return this.loadDataGroupInfo()
        }
        let params = {
          contentId: this.contentId,
          pageNo: 1,
          pageSize: 1
        }
        return this.fetchService.commentPage(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
          }
          this.data.comments = this.comments || res.count
          return res
        })
      },
      /*空间类*/
      spaceSave () {
       /* let params = {
          "optContent": this.content,
          "loginId": this.tools.getUserInfo().id,
          "spaceId": this.contentId
        }
        this.tools.showLoading()
        this.fetchService.saveSpaceInfoComment(params).then(res => {
          this.tools.hideLoading()
          if (res.code === 0) {
            this.content = ''
            this.data.comments ++
            this.$emit('message')
            return this.tools.tip('评论成功', 2000)
          }
          return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
        })*/
        this.$emit('spaceSave',{
          content:this.content
        }, val => {
          if(val === 0){
            this.$refs.textareaPl.blur();//提交完成以后失去焦点
            this.placeholder = '说些什么'
            this.content = ''
          }
        })
      },
      /*组工信息*/
      groupInfoSave () {
        this.$emit('groupInfoSave',{
          content:this.content
        }, val => {
          if(val === 0){
            this.$refs.textareaPl.blur();//提交完成以后失去焦点
            this.placeholder = '说些什么'
            this.content = ''
          }
        })
      },
      /*新闻评论*/
     newsSave () {
        this.$emit('newsSave',{
          content:this.content
        }, val => {
          if(val === 0){
            this.$refs.textareaPl.blur();//提交完成以后失去焦点
            this.placeholder = '说些什么'
            this.content = ''
          }
        })
      },
      commentAdd(){ //提供给父组件调用增加评论数量的方法
        this.data.comments ++
      },
      commentDeduce(){ //提供给父组件调用减少评论数量的方法
        this.data.comments --
      },
      mouseDown(){
        event.preventDefault()
      },
      /*新闻类评论提交*/
      save (e) {
        if (e.target.disabled) {
          return false
        }
        if (this.content.length == 0 || this.content.trim().length == 0) {
          return this.tools.alert('请填写留言')
        }
        if (this.$store.state.isSpace) {
          return this.spaceSave()
        }
        if (this.shareType === 7) {
          return this.groupInfoSave()
        }
        return this.newsSave()
      },
      /*支部空间类*/
      upSpace () {
        let userInfo = this.$localStorage.get('userInfo')
        let params = {
          spaceId: this.contentId,
          loginId: userInfo.id
        }
        return this.fetchService.saveSpaceInfoSupport(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
          }
          this.hasUp = true
          this.data.ups ++
          this.$store.state.newsDetail.ups ++
          this.tools.tip('点赞成功', 2000)
          return res
        })
      },
      /*新闻类*/
      up () {
        if (this.hasUp === true || this.isUp === true) {
          this.tools.tip('已点赞', 2000)
          return false
        }
        if (this.$store.state.isSpace) {
          return this.upSpace()
        }
        if (this.shareType === 7) {
          return this.groupInfoUps()
        }
        let params = {
          contentId: this.contentId,
          type: 1
        }
        return this.fetchService.newsUpsAndDowns(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
          }
          this.hasUp = true
          this.data.ups ++
          this.$store.state.newsDetail.ups ++
          this.$store.state.newsDetail.detail.upOrDown = true
          if (this.detail.detail) {
            this.detail.detail.upOrDown = true
          }
          //行为记录
          this.$emit('actionPush',1)
          //行为记录结束
          this.tools.tip('点赞成功', 2000)
          return res
        })
      },
      /*组工点赞*/
      groupInfoUps () {
        let params = {
          contentId: this.contentId
        }
        return this.fetchService.getgroupInfoUps(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
          }
          this.hasUp = true
          this.data.ups ++
          this.$store.state.newsDetail.ups ++
          this.$store.state.newsDetail.detail.upOrDown = true
          if (this.detail.detail) {
            this.detail.detail.upOrDown = true
          }
          this.tools.tip('点赞成功', 2000)
          return res
        })
      },
      addCollection () {
        if (this.hasCollection) {
          return this.deleteMultiple()
        }
        let params = {
          contentId: this.contentId
        }
        return this.fetchService.addCollection(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
          }
          this.hasCollection = true
          this.$store.state.newsDetail.detail.collected = true
          //行为记录
          this.$emit('actionPush',2)
          //行为记录结束
          this.tools.tip('收藏成功', 2000)
          return res
        })
      },
      deleteMultiple () {
        let params = {
          ids: [this.contentId]
        }
        return this.fetchService.deleteMultiple(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
          }
          this.hasCollection = false
          this.$store.state.newsDetail.detail.collected = false
          this.tools.tip('取消收藏', 2000)
          return res
        })
      },
      onfocus (key) {
        this.textareaClass = 'on-focus';
        this.$emit('onInputFocus',true);
      },
      onblur (key) {
        this.textareaClass = '';
        this.$emit('onInputFocus',false);
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .foot-action .inner .icons-btn-wrap .icon .num {
    background:#868686;
  }
  .foot-action {
    .input-wrap {
      input {
        font-size:14PX;
        &::placeholder {
          font-size:14PX;
        }
      }
    }
  }
  .title.link-arrow.link {
    border-color:#eeeeee;
    &.active {
      border-color:#0f9ceb;
    }
  }
  .foot-action .inner {
    .input-wrap {
      border-radius: 10px;
      display:flex;
      input, textarea {
        font-family:dang;
        box-sizing: border-box;
        margin: 0;
        margin-right: 100px;
        display: block;
        width: 100%;
        border: none;
        border-radius: 10px;
        line-height: 1.2em;
        font-size: $defaultFontSize;
        padding-top: 9PX;
        height: 34PX;
        &::placeholder {
          font-size: $defaultFontSize;
        }
      }
    }
  }
  .text-btn {
    white-space: nowrap;
    position: absolute;
    width:110px;
    right:0;
    top:0;
    height:100%;
    border-radius:10px;
    background: #ffffff;
    span {
      position: absolute;
      right:0;
      top:50%;
      white-space: nowrap;
      transform:translateY(-50%);
      text-align: center;
      /*padding:10px 30px;*/
      width:100%;
      display:block;
      /*background:#fff;*/
    }
  }
  .input-wrap1{
     min-height: 1.2rem;
   }
</style>

